
chrome.storage.local.get(['mRet'], res => {
    //获取插件存储的数据
    var workData = res.mRet.work
    var liveData = res.mRet.live
    var shortData = res.mRet.short
    // console.log(data)
    xuanRan(workData, "workBox")
    xuanRan(liveData, "liveBox")
    xuanRan(shortData, "shortBox")

})

//渲染界面
function xuanRan(data, divId) {
    for (var i = 0; i < data.length; i++) {
        var div = document.createElement('div')
        div.setAttribute("id", divId + i);
        div.setAttribute("class", "xiaobox " + divId);
        div.setAttribute("draggable", "true")
        div.innerHTML = `
        
         <img id="` + divId + `imgbtn` + i + `" type="` + divId + `" class="chahao"  style="display:none" draggable="false" src="icon/menu.png" alt="">
         <a href=" ` + data[i].url + ` "  target="_blank" class="a" draggable="false">
         <img class="tulogo" src=" ` + data[i].icon + ` " draggable="false"/>
         <div class="baioti" draggable="false"> ` + data[i].title + ` </div>
         </a>`
        document.getElementById(divId).appendChild(div);
        bindingOnClick(i, divId)
    }
}

//初始化
new dragSort({
    id: ['workBox', 'liveBox', 'shortBox'], // 拖动父级div框的ID
    drag: 'xiaobox', //拖动元素
    times: '1000', // 动画时长（默认一秒钟）
})


//动态绑定点击事件
function bindingOnClick(index, type) {

    //菜单
    document.getElementById(type + "imgbtn" + index).onclick = function () {
        //根据this.getAttribute("属性名") 获取到数据
        // alert("hi：" + this.getAttribute("type")+index);

        var _type
        if (type == "workBox") {
            _type = 0
        } else if (type == "liveBox") {
            _type = 1
        } else if (type == "shortBox") {
            _type = 2
        }
        meunOnClick(index, _type)
    }

    document.getElementById(type + index).onmouseover = function () {
        document.getElementById(type + "imgbtn" + index).style.display = "inline"
    }

    document.getElementById(type + index).onmouseout = function () {
        document.getElementById(type + "imgbtn" + index).style.display = "none"
    }
}



//获取background页面
var bg = chrome.extension.getBackgroundPage();

/**
 * item菜单点击事件
 * @param {number} index item索引
 * @param {number} type item类型 type 类型 0-->work；1-->live；2-->short；
 * @returns 
 */
function meunOnClick(index, type) {

    event.stopPropagation()
    $(".kuang").remove()
    $(".zhezhao").hide()
    $(".zhebox").hide()
    let div = document.createElement('div')
    div.classList.add('kuang')
    let x = event.pageX
    let y = event.pageY
    div.style.left = x - 70 + 'px'
    div.style.top = y + 'px'
    div.innerHTML = `
    <div class="zhezhao" ></div>
        <div class="zhebox" >
            <button id="delete" class="xiaoniu">移除</button>
        </div>
        `
    document.body.appendChild(div)
    $("#delete").click(function () {
        delStorageForIndex(index, type)
    })
    return
}

/**
 * 删除item
 * @param {number} index item索引
 * @param {number} type item类型 type 类型 0-->work；1-->live；2-->short；
 */
function delStorageForIndex(index, type) {
    bg.delStorage(index, type)
    location.reload();
}

// body 的事件
document.body.onclick = function () {
    $(".kuang").remove()
    $(".zhezhao").hide()
    $(".zhebox").hide()
}

/**
 * 拖动松开监听，在此做数据替换
 * @param {*} callback 
 * @param {*} naniList 
 */
function songListener(type, startIndex, endIndex) {

    var _type
    if (type == "workBox") {
        _type = 0
    } else if (type == "liveBox") {
        _type = 1
    } else if (type == "shortBox") {
        _type = 2
    }
    if (startIndex != endIndex) {
        bg.replaceStorage(_type, startIndex, endIndex, function (res) {
            console.log(res.mRet)

            // var workData = res.mRet.work
            // var liveData = res.mRet.live
            // var shortData = res.mRet.short
            // console.log("bg.replaceStorag")
            // xuanRan(workData, "workBox")
            // xuanRan(liveData, "liveBox")
            // xuanRan(shortData, "shortBox")
        })
        location.reload();

    }

}


//添加数据
// document.getElementById("add").onclick = function () {
//     var item = { "title": "我试试啊", "favIconUrl": "http：icon", "url": "http：url" }
//     bg.addStorage(item, 0)
// }



